<template>
	<view class="son-container" :class="skinStyle">
		<!--header-->
		<!-- <view class="search-header-box">
			<view class="search-header">
				<view class="search-searchbox">
					<view class="iconfont iconsousuohome" @tap="search"></view>
					<input class="search-input" v-model="searchKey" confirm-type="search"
					@confirm="getProductList({size:10,num:1})"></input>
					<view class="search-clear iconfont iconguanbi1" v-if="searchKey"
					@tap="searchKeyFun"></view>
				</view>
				<view class="search-text" @tap="getProductList({size:10,num:1})">搜索</view>
			</view>
		</view> -->
		<view class="home-headers search-pos">
			<view class="home-search">
				<view class="iconfont iconsousuohome"></view>
				<input class="search-input" v-model="searchKey" focus
				 confirm-type="search" @confirm="getProductList({size:10,num:1})"></input>
				<view class="search-clear iconfont iconguanbi1" v-if="searchKey"
				@tap="searchKeyFun"></view>
			</view>
		</view>
		<view class="productList-wrap">
			<!-- 产品列表 -->
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="getProductList"
			 :fixed="true" :top="90">
				<view class="category-wrap">
					<view class="category-con">
						<view class="category-goods" v-for="(item,index) in goodsList" :key="index" @tap="goGoodsDetail(item)">
							<view class="image-box">
								<block v-for="(child,key) in item.esGoodsImgsData" :key="key">
									<image v-if="child.imgIndex == '-1'" mode="aspectFill" :src="imgSrc+child.imgReuri"></image>
								</block>
							</view>
							<view class="image-text">
								<view class="goods-title">{{item.goodsName}}</view>
								<view class="goods-price">￥{{item.goodsPrice?item.goodsPrice:0}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixin from "@/utils/mixin.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [mixin, MescrollMixin],
		data() {
			return {
				imgSrc: this.$store.state.imgUrl,
				selectedIndex: 0,
				categroyId: '',
				searchKey: "", //搜索关键词
				goodsList: [],
				type: '0',//0:初期 1:查询
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				searchLabel:'商品名称',
				searchIndex:0,
				stockGoodsOutTypeList:['商品名称','物料码']
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			this.categroyId = options.categroyId;
		},
		methods: {
			serchTypeChange(e){
				this.searchIndex = e.target.value;
				this.searchLabel = this.stockGoodsOutTypeList[this.searchIndex];
				this.type = '1';
				this.getProductList({size:10,num:1});
			},
			clearSearchKey() {
				this.searchKey = '';
				this.type = '0';
				this.getProductList({size:10,num:1});
			},
			//商品列表
			getProductList(page) {
				let params = {
					current: page.num,
					pageSize: page.size,
					isShelf: 1,//0:下架,1:上架
					type: 1,//0:初期 1:查询
					enableStatus: 0, //"0":"启用","1": "禁用"
					goodsName: this.searchKey
				};
				console.log(params);
				this.$http.getEsGoodsAll(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(curPageData.length);
						if (page.num == 1) {
							this.goodsList = []
						};
						this.goodsList = this.goodsList.concat(curPageData);
						console.log(this.goodsList)
					} else {
						this.mescroll.endErr()
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			},

			recordsIcon() {
				this.recordsList = []
			},
			//搜索框输入
			searchKeyFun() {
				this.searchKey = ''
			},
			goGoodsDetail(item) {
				uni.navigateTo({
					url: `/packageC/pages/shopProductDetail/shopProductDetail?productId=${item.id}`
				})
			}
		},
	}
</script>

<style lang="scss">
	.son-container {
		padding-bottom: env(safe-area-inset-bottom);
		min-height: 100vh;
	}
	
	.productList-wrap{
		width: 100%;
		padding:10rpx 20rpx;
		.category-wrap{
			padding:0 5rpx;
		}
		.category-con{
			width:100%;
		}
		.category-goods{
			width:calc(50% - 24rpx);
			height: 400rpx;
			float:left;
			background-color: #fff;
			box-shadow: 0rpx 4rpx 24rpx 0px rgba(143, 97, 95, 0.1);
			border-radius:18rpx;
			box-sizing: border-box;
			padding:16rpx 16rpx 24rpx;
			margin:20rpx 12rpx 0rpx;
			// &:nth-child(2n+1){
				
			// }
			// &:nth-child(2n){
			// 	margin:20rpx 0 0rpx 1%;
			// }
			.image-box{
				width: 100%;
				height:232rpx;
				margin-bottom: 8rpx;
				overflow: hidden;
				border-radius:8rpx;
				image{
					width: 100%;
					height: 100%;
					// object-fit:cover;
					
				}
			}
			.image-text{
				padding:0 4rpx;
				.goods-title{
					color:#121212;
					font-size: 26rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					height: 80rpx;
					line-height: 42rpx;
					margin:8rpx 0;
				}
				.goods-subtitle{
					font-size: 22rpx;
					color:#121212;
					height: 44rpx;
				}
				.goods-price{
					color: #E8374A;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
			
		}
	}
	.goodsOutType{
		width: 180rpx;
		background-color: #EEEEEE;
		margin-right: 20rpx;
		border-radius: 20rpx;
		padding: 5rpx 0;
		font-size: 28rpx;
		color: #333;
		
		.setupCon{
			display: flex;
			justify-content: space-between;
			padding: 5rpx 18rpx;
			align-items: center;
		}
		
	}

	.historicRecords,
	.changeSearch {
		margin-top: 60rpx;
		padding: 60rpx 40rpx 80rpx 40rpx;
		background-color: #FFFFFF;
		color: #333333;
		// border-radius:0 0 50rpx 50rpx;
	}

	.changeSearch {
		padding: 20rpx 40rpx;
	}

	.recordsHeader {
		display: flex;
		justify-content: space-between;
	}

	.recordsContent {
		padding-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.records {
		font-size: 28rpx;
		border: 1px solid $borderColor;
		color: #333333;
		border-radius: 50rpx;
		margin: 10rpx 20rpx 10rpx 0;
		padding: 2rpx 20rpx;
		background-color: $borderColor;
	}

	.changeW {
		font-size: 28rpx;
		border-bottom: 1rpx solid $borderColor;
		padding: 20rpx 10rpx;
	}

	.parase-content {
		color: #333;
		font-size: 28rpx;
		// text-align: center;
		// display: flex;
	}

	.parase-content .em {
		color: #E94732 !important;
	}

	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.search-header-box {
		width: 100%;
		background: #fff;
		position: fixed;
		z-index: 99998;
		left: 0;
		top: 0;
		border-bottom: 2rpx solid $borderColor;
	}

	.search-header {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 10rpx;
	}

	.search-searchbox {
		flex: 1;
		height: 70rpx;
		border-radius: 80rpx;
		font-size: 24rpx;
		// background: $borderColor;
		border: 2rpx solid $themeColor1;
		padding: 6rpx 20rpx;
		box-sizing: border-box;
		color: #999;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.search-input {
		text-align: left !important;
		margin-left: 12rpx;
		width: 100% !important;
		background-color: #fff !important;
		color: #121212;
		font-size: 28rpx;

		.uni-input-input {
			width: 100%;
			font-size: 30rpx;
		}
	}

	.search-text {
		font-size: 28rpx;
		color: #444;
		margin: 0 20rpx 0 30rpx;
		color: $red;
	}

	.search-search-text {
		padding-left: 16rpx;
	}

	.search-search-key {
		max-width: 80%;
		height: 100%;
		padding: 0 16rpx;
		margin-left: 12rpx;
		display: flex;
		align-items: center;
		border-radius: 15px;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
	}

	.search-key-text {
		box-sizing: border-box;
		padding-right: 12rpx;
		font-size: 12px;
		line-height: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.search-clear {
		padding: 10rpx;
	}
</style>
